<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js"></script>
	<style>
		button{
			width: 100px;
			height: 50px;
		}
	</style>
	<body>
		<div id="app">
			<button :style="{background:mycolor}" :style="{background:mycolor}" @click="click1()">亦犬1</button>
			<button :style="{background:mycolor1}" @click="click2()">亦犬2</button>
			<button :style="{background:mycolor2}" @click="click3()">亦犬3</button>
			
			<div><img :src="img" alt="" srcset=""></div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data(){
				return{
					img:"img/yq1.png",
					mycolor:"skyblue",
					mycolor1:"",
					mycolor2:"",
					
				}
			},
			methods:{
				click1(){
					this.img = "img/yq1.png";
					this.mycolor = "skyblue";
					this.mycolor1 = "";
					this.mycolor2 = "";
				},
				click2(){
					this.img = "img/yq2.png";
					this.mycolor = "";
					this.mycolor1 = "skyblue";
					this.mycolor2 = "";
				},
				click3(){
					this.img = "img/yq3.png";
					this.mycolor = "";
					this.mycolor1 = "";
					this.mycolor2 = "skyblue";
				},
			},
		})
	</script>
</html>